<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
        Vue 生命周期 和 生命周期的四个阶段
        思考:什么时候可以发送初始化渲染请求? (越早越好)
            什么时候可以开始操作dom? (至少dom得渲染出来)
        Vue生命周期:
            一个Vue实例从 创建到销毁的整个过程生命周期四个阶段: 
              创建  响应式数据处理(可以发送初始化渲染) 执行一次
              挂载  渲染模板(可以操作dom)           执行一次
              更新  数据修改 更新视图               执行一次
              销毁  销毁实例                       执行多次 

        Vue 生命周期函数 (钩子函数)
            Vue生命周期过程中，会自动运行一些函数，被称为[生命周期钩子] 
            让开发者可以在[特定阶段] 运行自己的代码。
            --------------------------------------------------------------------------
            | beforeCrete                      | 创建 | created(可以发送初始化渲染请求)  |
            --------------------------------------------------------------------------    
            | befoureMound                     | 挂载 | mounted(可以操作dom)           |
            --------------------------------------------------------------------------    
            | beforeUpdate                     | 更新 | updated                       |
            ---------------------------------------------------------------------------    
            | beforeDestroy(可以清除定时器 延时器)| 销毁 | destroyed                     | 
            --------------------------------------------------------------------------    
    -->
    <div id="app">
        <h3>{{title}}</h3>
        <div>
            <button @click="count--">-</button>
            <span>{{count}}</span>
            <button @click="count++">+</button>
        </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script src="../lib/axios.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    count: 100,
                    title: '计数器'
                }
            },
            watch: {
            },
            methods: {
            },
            computed: {
            },
            //1 创建阶段
            beforeCreate() {
                console.log('beforeCreate, 响应式数据准备好之前', this.count)  //undefined
            },
            created() {
                console.log('created, 响应式数据准备好之后', this.count)   //100
                //此时可以 修改数据 (比如发送请求 获取数据后修改)
            },
            
            //2 挂载阶段
            beforeMount() {
                console.log('beforeMount, 模板渲染之前', document.querySelector('h3').innerHTML)  //{{title}}
            },
            mounted() {
                console.log('mounted, 模板渲染之后', document.querySelector('h3').innerHTML)  //计数器
                //可以开始操作dom
            },

            //3 更新阶段
            beforeUpdate() {
                console.log('beforeUpdate, 更新模板之前', this.count, document.querySelector('span').innerHTML)  
            },
            updated() {
                console.log('updated, 更新渲染之后', this.count, document.querySelector('span').innerHTML)  
            },

            //4 销毁阶段
            beforeDestroy() {
                console.log('beforeDestroy, 卸载之前')  
                console.log('清除一些vue之外的资源占用')  
            },
            destroyed() {
                console.log('destroyed, 卸载之后')  
            },

        })
    </script>
</body>

</html>